<template>
    <div class="sidebar">
        
        <!-- <el-popover
            placement="right"
            trigger="click"
            width="100px"
            >
            <template #reference>
                 
            </template>
            <el-button type="danger"  icon="el-icon-close" @click="handleLogout">退出登录</el-button>
            
        </el-popover> -->
        <!-- <div class="admin-user" :style="{width: !collapse?'180px':'50px'}">
            <div>
                <img src="../assets/img/user.png" alt="">
                <span v-if="!collapse">{{userName}}</span>
            </div>
        </div> -->
        <div class="slide-box">
            <!-- <div class="collapse-img" @click="collapseChage">
                <i style="color:#414141;" :class="!collapse?leftImg:rightImg"></i>
            </div> -->
            <!-- <img class="collapse-img" @click="collapseChage" :src="!collapse?leftImg:rightImg" alt=""> -->
       
            <el-menu
                class="sidebar-el-menu"
                :default-active="onRoutes"
                :collapse="collapse"
                background-color="transparent"
                :text-color="!collapse? '#414141':'#333'"
                active-text-color="#0087E6"
                unique-opened
                router
            >
                
                <template v-for="item in items">
                    <template v-if="item.subs">
                        <el-submenu :index="item.index" :key="item.index">
                            <template #title>
                                <i :class="item.icon" class="menu-icon" style="display:inline-block;margin-left:-5px;"></i>
                                <span>{{ item.title }}</span>
                            </template>
                            <template v-for="subItem in item.subs">
                                <el-submenu
                                    v-if="subItem.subs"
                                    :index="subItem.index"
                                    :key="subItem.index"
                                >
                                    <template #title>{{ subItem.title }}</template>
                                    <el-menu-item
                                        v-for="(threeItem, i) in subItem.subs"
                                        :key="i"
                                        :index="threeItem.index"
                                    >{{ threeItem.title }}</el-menu-item>
                                </el-submenu>
                                <el-menu-item
                                    v-else
                                    :index="subItem.index"
                                    :key="subItem.index"
                                >{{ subItem.title }}</el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                    <template v-else>
                        <el-menu-item :index="item.index" :key="item.index" >
                            <i :class="item.icon" class="item-icon" style="display:inline-block;margin-left:-5px;"></i>
                            <template #title>{{ item.title }}</template>
                        </el-menu-item>
                    </template>
                </template>
            </el-menu>
         </div>
        
    </div>
</template>

<script>

export default {
    data() {
        return {
            leftImg: 'el-icon-d-arrow-left',
            rightImg: 'el-icon-d-arrow-right',
            // leftImg: require('@/assets/img/left.png'),
            // rightImg: require('@/assets/img/right.png'),
            userName: '',
            items: [
                {
                    icon: "el-icon-s-home",
                    index: "home",
                    title: "实况查看"
                },
                {
                    icon: "el-icon-data-analysis",
                    index: "damMonitoring",
                    title: "堤坝监控"
                },
                {
                    icon: "el-icon-set-up",
                    index: "operationMonitoring",
                    title: "设备监控"
                },
                
                {
                    icon: "el-icon-view",
                    index: "patrolInspectionRecord",
                    title: "巡检记录"
                },
                {
                    icon: "el-icon-date",
                    index: "maintenanceRecord",
                    title: "维修记录"
                },
                {
                    icon: "el-icon-document",
                    index: "faultInformation",
                    title: "故障信息"
                },
                {
                    icon: "el-icon-chat-dot-square",
                    index: "smsContent",
                    title: "短信内容"
                },
                {
                    icon: "el-icon-film",
                    index: "basicInformation",
                    title: "基础信息",
                     subs: [
                         {
                            icon: "",
                            index: "monitoringPoint",
                            title: "水库信息"
                        },
                        {
                            icon: "",
                            index: "videoCamera",
                            title: "摄像机信息"
                        },
                        {
                            icon: "",
                            index: "sensor",
                            title: "传感器信息"
                        },
                        {
                            icon: "",
                            index: "parts",
                            title: "配件信息"
                        },
                        {
                            icon: "",
                            index: "dataDictionary",
                            title: "数据字典"
                        }
                     ]
                },
               
                {
                    icon: "el-icon-setting",
                    index: "sysManage",
                    title: "系统管理",
                    subs: [
                        {
                            icon: "",
                            index: "userManage",
                            title: "用户信息"
                        },
                        {
                            icon: "",
                            index: "roleManage",
                            title: "角色管理"
                        },
                        {
                            icon: "",
                            index: "operationLog",
                            title: "操作日志"
                        }
                    ]
                }
            ],
            
        };
    },
    created() {
        // let userInfo = JSON.parse(localStorage.getItem('userInfo'))
        // this.userName = userInfo.username
    },
    methods: {
        collapseChage() {
            this.$store.commit("hadndleCollapse", !this.collapse)
        },
    },

    computed: {
        onRoutes() {
            return this.$route.path.replace("/", "")
        },
        collapse(){
            return this.$store.state.local.collapse
        }
    }
};
</script>

<style scoped>
.sidebar {
    display: block;
    position: absolute;
    left: 0;
    top: 60px;
    bottom: 0;
    overflow-y: scroll;
    z-index: 10;
    background: url('../assets/img/slidebar-bg.png') no-repeat;
    /* background-size: contain; */
    background-size: 100% 100%;
}
.sidebar::-webkit-scrollbar {
    width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
    width: 250px;
    
}
.sidebar > ul {
    /* height: calc(100% - 250px); */
    height: 100%;
}

.el-submenu {
    /* width: 80%;
    margin: 0 auto;
    border-radius: 30px; */
}

.el-menu-item {
    /* display: flex;
    align-items: center; */
    /* width: 80%;
    border-radius: 30px;
    margin: 0 auto;
    height: 50px;
    line-height: 50px; */
    color: #414141 !important ;
}
.el-submenu__title {
    /* border-radius: 30px!important; */
    color: #414141 !important ;
}
.el-menu-item.is-active {
    background-color: #E5F3F1 !important ;
    color: #008CF5 !important ;
    border-left: 4px solid #008CF5;
}
.el-menu-item.is-active i {
    color: inherit!important;
}
.el-submenu__title i {
    color: #414141 !important;
}
.el-menu-item i {
    color: #414141 !important;
}


.admin-user {
    width: 180px;
    height: 70px;
    margin: 10px auto 20px;
    background: #32A4FD;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 4px;
    color: #414141;
    
    -webkit-transition: width .3s ease-in-out;
    transition: width .3s ease-in-out;
}
.admin-user >div {
    display: flex;
    justify-content: center;
    align-items: center;
}
.admin-user img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin-right: 5px;
}
.admin-user .off {
    width: 16px;
    height: 16px;
    cursor: pointer;
    color: #f76d6d;
}
.sidebar .el-popover {
    width: auto!important;
}
.user-handle {
    cursor: pointer;
    /* transform: rotateZ(180deg); */
}
.handle-item {
    text-align: center;
    cursor: pointer;
    color: #409EFF;
    padding: 5px 0;
}
.handle-item:hover {
    /* background: #eaeaea; */
}
.handle-logout {
    color: #F56C6C;
}
/* .sidebar .is-opened {
    color: #333!important;
} */
/* .el-submenu__title span, .el-menu-item{
    color: white;
} */
.slide-box {
    position: relative;
    height: 100%;
}
.collapse-img {
    position: absolute;
    z-index: 10000;
    top: 45%;
    right: 0;
    width: 15px;
    background: #6f99e7;
    border-radius: 30px 0px 0px 30px;
    padding: 20px 0;
    box-shadow: 0 0 5px #8d8c8c;
    cursor: pointer;
}
</style>
